<template>
	<div>
		<nut-popup v-model:visible="isVisible"   position="bottom"  style="border-radius: 10px 10px 0 0 ;">
			<div class="addModel">
				<div class="flex flexBetween">
					<div class="address">编辑收货人地址</div>
					<nut-icon name="close" class="close" @click="onClose"></nut-icon>
				</div>
				<nut-form :model-value="formData" ref="ruleForm" :rules="rules">
					<nut-form-item label="收件人" prop="rec_name">
						<input
							class="nut-input-text"
							v-model="formData.rec_name"
							placeholder="请输入收件人"
							type="text"
						/>
					</nut-form-item>

					<nut-form-item
						label="联系电话"
						prop="rec_phone"
						:rules="[
							{
								regex:
									/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
								message: '手机号码填写不正确'
							}
						]"
					>
						<input
							class="nut-input-text"
							v-model="formData.rec_phone"
							placeholder="请输入联系电话"
							type="text"
						/>
					</nut-form-item>
					<nut-form-item label="所在地区" prop="rec_location">
						<nut-input
							class="nut-input-text"
							v-model="formData.rec_location"
							placeholder="请选择"
							type="text"
							right-icon="rect-right"
							readonly
							@click="showAddress"
							style="color: #666 !important"
						/>
						<nut-cascader
							title="地址选择"
							v-model:visible="state.visible"
							v-model="formData.rec_location as any"
							text-key="label"
							@change="events.change"
							@path-change="events.pathChange"
							value-key="label"
							children-key="children"
							:options="options"
						></nut-cascader>
					</nut-form-item>
					<nut-form-item label="详细地址" prop="rec_address">
						<input
							class="nut-input-text"
							v-model="formData.rec_address"
							placeholder="街道、楼牌号等"
							type="text"
						/>
					</nut-form-item>
					<nut-cell  >
						<nut-button
							type="primary"
							block
							color="linear-gradient(to right, #3EBD33, #9FDF4F)"
							style="margin-right: 10px"
							@click="submit"
							>保存</nut-button
						>
					</nut-cell>
					 
				</nut-form>
			</div>
		</nut-popup>
	</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, nextTick, ref } from 'vue'
import { Toast } from '@nutui/nutui'
import { EditType } from '@/type/BaseEnum'
import PROVICE from '@/utils/provice'
import useInstance from '@/hooks/useInstance'
import { changeOrderReceiptApi } from '@/api/manage'
import { OrderReceiverParam} from '@/api/manage/MangeModel'
const { global } = useInstance()
const isVisible = ref<boolean>(false)
//注册事件
const emits = defineEmits(['reFresh'])
const rules = {
 
    rec_address:[
        { required: true, message: '请输入详细地址' }
    ],
    rec_location:[{ required: true, message: '请选择' }],
    rec_phone:[{ required: true, message: '请填写电话' }],
    rec_name:[{ required: true, message: '请输入收件人' }],
 
}
const formData = reactive<OrderReceiverParam>({
	rec_location: undefined,
	rec_address: undefined,
	rec_phone: undefined,
	rec_name: undefined,
	rec_id:undefined,
	order_id:undefined,
	type: undefined
})

const ruleForm = ref<any>(null)

const submit = () => {
	 
	ruleForm.value.validate().then(async ({ valid, errors }: any) => {
		if (valid) {
			let res  = await changeOrderReceiptApi(formData as any)
			  
			if (res && res.code == 0) {
				Toast.success('编辑成功')

				emits('reFresh',{newdata:formData as any})
				onClose()
			}
		} else {
			console.log('error submit!!', errors)
		}
	})
}
// 自定义属性名称
const state = reactive({
	visible: false,
	value: [ ]
})
const options = ref<any>([])
const reset = () => {
	formData.rec_location = undefined
	formData.rec_address = undefined
	formData.rec_phone = undefined
	formData.rec_name = undefined
	formData.rec_id = undefined
	formData.type = undefined
}

const showAddress = () => {
	state.visible = true
}

const show = (type: string, row: any) => {
	console.log(row)
	  options.value = PROVICE

	 		nextTick(() => {
			//把要编辑的数据复制到表单绑定的对象
			global.$objCoppy(row, formData)
		})

	isVisible.value = true
	 
 
}
const onClose = () => {
	isVisible.value = false
}
const events = {
	change(...args: any) {
		console.log('change', ...args)
	},
	pathChange(...args: any) {
		console.log('pathChange', ...args)
	}
}

 
defineExpose({
	show
})
</script>
<style scoped lang="scss">
.addModel {
	border-radius: 20px 20px 0 0 ;
	padding: 36px 30px;
}
.address {
	font-size: 32px;
	font-weight: bold;
	color: #000;
}
.close {
	font-size: 26px !important;
	font-weight: bold;
}
:deep(.nut-input .input-text, .nut-input__text--readonly) {
	color: #666 !important;
}
</style>
